<template>
	<view class="user">
		<view class="vip" :style="{backgroundImage: 'url(' + vip.img + ') ' }">
			<view class="vip_content">
				<image :src="vip.vip" mode="" style="width:48rpx;height: 48rpx;"></image>
				<view class="vip_text">{{member_info.member_status==1?'会员VIP':'未开通'}}</view>
			</view>
			<view class="vip_content_bottom">
				<view class="vip_text">
					{{member_info.member_status==1?`已拥有VIP服务 ${member_info.member_expire_date} 到期`:'您还未开通会员权限！'}}
				</view>
				<view class="right" @click="PayRoute">{{member_info.member_status==1?'会员续费 >>':'开通会员 >>'}}</view>
			</view>
		</view>
		<view class="history">
			<view class="get">
				<view class="whole" v-for="(item,index) in GetList" :key="index">
					<view class="num">{{item.num}}</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
			<view class="payment">
				<view class="payment_list" v-for="(item,index) in PaymentList" :key="index" @click="PayList(item)">
					<image :src="item.pic " style="width: 80rpx;height: 80rpx;" mode=""></image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
			<view class="consume">
				<view class="title">会员余量</view>
				<view class="consume_bom">
					<view class="consume_list" v-for="(item,index) in ConsumeList" :key="index"
						@click="consumelist(item)">
						<image :src="item.pic " style="width: 80rpx;height: 80rpx;" mode=""></image>
						<view class="titles">{{item.title}}</view>
						<view v-if="index==0||index==1" class="num">
							{{index==0?member_info.member_status==1?member_info.pic_number:'未开通':member_info.member_status==1?member_info.video_number:'未开通'}}
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="out">退出登录</view>
			<!-- 			<button open-type="contact" session-from="舞界AI" show-message-card="true" send-message-title="舞界AI小程序"
				send-message-path="/pages/index/index">
				联系客服
			</button> -->
		</view>
		<tn-modal v-model="showIos" :radius="40" :custom="true" :maskCloseable="false">
			<view class="IosModel">
				<view class="title">警告</view>
				<view class="content">{{contentIos}}</view>
				<button open-type="contact" session-from="舞界AI" show-message-card="true" send-message-title="舞界AI小程序"
					send-message-path="/pages/index/index" @click="showIos=false">
					了解详情
				</button>
			</view>
		</tn-modal>

		<!-- 联系客服 -->
		<tn-modal v-model="ShowRelation" title="联系方式" :content="RelationContent + phoneNumber" :radius="40"
			:button="RelationButton" :maskCloseable="false" @click="DelModel"></tn-modal>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import VIP from "@/static/image/VIP.png"
	import vip_samll from "@/static/image/vip_samll.png"
	import z from "@/static/image/z.png"
	import l from "@/static/image/l.png"
	import f from "@/static/image/f.png"
	import p from "@/static/image/p.png"
	import s from "@/static/image/s.png"
	export default {
		name: 'user',
		data() {
			return {
				vip: {
					img: VIP,
					vip: vip_samll,
					title: '会员VIP',
					content: '已拥有VIP服务 2025-08-28 到期'
				},
				contentIos: '',
				showIos: false,
				ShowRelation: false,
				RelationContent: '客服电话：',
				phoneNumber: '18514079998',
				RelationButton: [{
						text: '取消',
						backgroundColor: '#ebebeb',
						fontColor: '#7265E3',
					},
					{
						text: '拨打电话',
						backgroundColor: '#7265E3',
						fontColor: '#FFFFFF'
					}
				],
				member_info: {},
				GetList: [{
						num: '0',
						title: '获赞',
					},
					{
						num: '0',
						title: '喜欢',
					},
					{
						num: '0',
						title: '考级',
					},
				],
				PaymentList: [{
						pic: z,
						title: '支付记录'
					},
					{
						pic: l,
						title: '联系客服'
					},
					{
						pic: f,
						title: '分享福利'
					},
				],
				ConsumeList: [{
						pic: p,
						title: '照片分析',
					},
					{
						pic: s,
						title: '视频分析',
					},
					{},
				],
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo;
			}
		},
		methods: {
			...mapMutations(['login', 'logout']),
			share() {
				// wx.downloadFile({
				//   url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
				//   success: (res) => {
				//     wx.showShareImageMenu({
				//       path: res.tempFilePath
				//     })
				//   }
				// })
			},
			out() {
				this.logout();
				uni.reLaunch({
					url: '/basicPage/login/index'
				});
			},
			PayRoute() {
				if (this.SystemPlatform == 'apple') {
					this.showIos = true
					this.contentIos = '非常抱歉，由于相关规范，iOS功能暂不可用，请联系线下工作人员。'
				} else {
					wx.navigateTo({
						url: `/basicPage/Pay/index`
					})
				}

			},
			DelModel(e) {
				switch (e.index) {
					case 0:
						this.ShowRelation = false
						break;
					case 1:
						wx.makePhoneCall({
							phoneNumber: this.phoneNumber, // 这里填写你的联系电话
						});
						break;

				}
			},
			PayList(obj) {
				switch (obj.title) {
					case '支付记录':
						wx.navigateTo({
							url: `/basicPage/PayList/index`
						})
						break;
					case '联系客服':
						this.ShowRelation = true
						break;
				}
			},
			consumelist(obj) {
				switch (obj.title) {
					case '照片分析':
						wx.navigateTo({
							url: `/basicPage/historical/index`
						})
						break;
					case '视频分析':
						break;
				}
			}
		},
		watch: {
			userInfo: {
				handler(newUserInfo) {
					this.member_info = newUserInfo.member_info
				},
				deep: true,
				immediate: true // 组件加载时立即执行一次
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		padding: 28rpx 0 300rpx;
		overflow-y: auto;

		.vip {
			width: calc(100% - 40rpx);
			padding: 42rpx 0 0 40rpx;
			height: 250rpx;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			margin: 0 auto;
			overflow: visible;

			.vip_content {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.vip_text {
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 40rpx;
					color: #2D3142;
					line-height: 48rpx;
				}
			}

			.vip_content_bottom {
				display: flex;
				justify-content: space-between;
				padding-right: 40rpx;

				.vip_text {
					font-weight: 400;
					font-size: 24rpx;
					color: #2D3142;
					line-height: 34rpx;
				}

				.right {
					font-size: 27rpx;
					color: #7b1cff;
				}
			}

		}

		.history {
			margin-top: -26px;
			padding: 0 48rpx;

			.get {
				display: flex;
				align-items: center;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				opacity: 0.8;
				margin-bottom: 24rpx;

				.whole {
					position: relative;
					text-align: center;
					flex: 1;

					.num {
						margin-bottom: 8rpx;
					}
				}

				.whole::after {
					content: '';
					position: absolute;
					right: 0;
					bottom: 22rpx;
					width: 2rpx;
					height: 40rpx;
					background: #F4F4F4;
					border-radius: 16rpx;
				}
			}

			.payment {
				display: flex;
				align-items: center;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				opacity: 0.8;
				margin-bottom: 24rpx;

				.payment_list {
					text-align: center;
					flex: 1;
				}
			}

			.consume {
				// height: 304rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				padding-bottom: 48rpx;
				opacity: 0.8;

				.title {
					display: block;
					height: 72rpx;
					padding: 24rpx 0 32rpx 32rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #2D3142;
					line-height: 40rpx;
				}

				.consume_bom {
					display: flex;
					align-items: center;

					.consume_list {
						text-align: center;
						width: 33%;

						.titles {
							margin-top: 4rpx;
						}

						.num {
							margin-top: 8rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #7265E3;
							line-height: 34rpx;
						}
					}
				}
			}

			.btn {
				margin: 64rpx auto 0;
				width: 558rpx;
				height: 104rpx;
				background: #7265E3;
				border-radius: 28rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 104rpx;
				text-align: center;
			}
		}

		.IosModel {
			.title {
				margin-bottom: 15rpx;
				font-size: 20px;
				text-align: center;
			}

			.content {
				margin-bottom: 30rpx;
			}

			button {
				background: #7265E3;
				border-radius: 28rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
</style>